<template>
    <div class="row">
        <component
            :is="element" 
            class="input"
            :class="inputClass"
            :name="name"
            :type="type"
            :placeholder="placeholder"
            :value.prop="text"
            @input="update"
            v-bind="$attrs"
        />
    </div>
</template>
<script>
export default {
    props : {
        name: {
            type: String
        },
        type: {
            type: String,
            default: 'text',
        },
        text: {
            require: true,
        },
        placeholder: {
            type: String
        },
        invalid: {
            type: Boolean,
            default: false
        }
    },
    model: {
        prop: 'text',
        event: 'update',
    },
    computed: {
        inputClass (){
            return {
                'invalid': this.invalid
            }
        },
           element(){
            return this.type === 'textarea' ? this.type : 'input'
        }
    },
    methods: {
        update (event) {
           this.$emit('update', event.currentTarget.value)
        }
    }
}
</script>

